<template>
  <div>
    <section class="tool-bar">
      <a-button type="primary" class="btn" @click="openModal('add')">上传驱动</a-button>
      <a-button-group class="btn">
        <a-button
          :type="visited == OsType.WIN ? 'primary' : ''"
          @click="handlerBitsClick(OsType.WIN)"
        >Windows</a-button>
        <a-button
          :type="visited == OsType.MAC ? 'primary' : ''"
          @click="handlerBitsClick(OsType.MAC)"
        >MacOS</a-button>
      </a-button-group>
    </section>
    <a-table
      :columns="columns"
      :rowKey="record => record._id"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      :scroll="{ x: 1600 }"
    >
      <template slot="handler" slot-scope="row">
        <a-button
          :style="{ marginRight: '10px' }"
          type="dashed"
          size="small"
          @click="openModal('edit', row)"
        >编辑</a-button>
        <a-popconfirm placement="left" title="确认删除?" @confirm="handlerDelete(row._id)">
          <a-button :style="{ marginRight: '10px' }" type="danger" size="small">删除</a-button>
        </a-popconfirm>
        <a-button type="primary" size="small" ghost @click="handlerDownload(row.httpPath)">下载</a-button>
      </template>
      <template slot="createTime" slot-scope="createTime">{{ createTime | fmtDate }}</template>
      <template slot="osType" slot-scope="osType">{{ OsType2Val[osType] }}</template>
      <template slot="driverType" slot-scope="driverType">{{ DriverType2Val[driverType] }}</template>
      <template slot="cpuBits" slot-scope="cpuBits">{{ CpuBits2Val[cpuBits] }}</template>
      <template slot="fileName" slot-scope="fileName">
        <a-popover trigger="hover" v-if="fileName && fileName.length > 10">
          <template slot="content">
            <p class="content">{{ fileName }}</p>
          </template>
          <span class="ignore">{{ fileName }}</span>
        </a-popover>
        <span v-else>{{ fileName }}</span>
      </template>
      <template slot="version" slot-scope="version">
        <a-popover trigger="hover" v-if="version && version.length > 10">
          <template slot="content">
            <p class="content">{{ version }}</p>
          </template>
          <span class="ignore">{{ version }}</span>
        </a-popover>
        <span v-else>{{ version }}</span>
      </template>
      <template slot="description" slot-scope="description">
        <a-popover trigger="hover" v-if="description && description.length > 10">
          <template slot="content">
            <p class="content">{{ description }}</p>
          </template>
          <span class="ignore">{{ description }}</span>
        </a-popover>
        <span v-else>{{ description }}</span>
      </template>
    </a-table>
    <modal-temp ref="modal" :title="title" @submit="bool => { if(bool) this.initList() }"></modal-temp>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { drive_pages, drive_count, drive_delete } from "@/api/drive";
import { columns } from "./table";
import { OsType2Val, DriverType2Val, CpuBits2Val, SortBy2Val } from "@/common/Enum2Val";
import { OsType, CpuBits } from "@/utils/VEnum";
import { fmtDate } from "@/filters";
import ModalTemp from "./Modal.vue";
import { PaginationMixin } from "@/mixins";

@Component({
  name: "DriveTable",
  components: { ModalTemp },
  filters: { fmtDate },
  data() {
    return {
      OsType2Val,
      DriverType2Val,
      CpuBits2Val,
      OsType
    };
  }
})
export default class DriveTable extends PaginationMixin {
  private loading: boolean = false;
  private data: any[] = [];
  private columns: any[] = columns;
  private visited: number = OsType.WIN;
  //modal
  private title: string = "";

  handlerDownload(path: string) {
    window.location.href = path;
  }

  handleTableChange(pagination: any, filters: any, sorter: any) {
    const { order } = sorter;
    const search: any = {};
    if (SortBy2Val[order]) search.sortBy = SortBy2Val[order]
    const pager = { ...this.pagination };
    pager.current = pagination.current;
    this.pagination = pager;
    this.initList(search);
  }

  openModal(title: string, row: any) {
    this.title = title;
    const temp: any = this.$refs.modal;
    this.$nextTick(() => {
      if (title === "edit") {
        temp.initFormData(title, row);
        temp.showModal(title);
      } else {
        temp.initFormData(title, { cpuBits: CpuBits.GENERAL });
        temp.showModal(title);
      }
    });
  }

  async handlerDelete(id: string) {
    try {
      const { data } = await drive_delete(id);
      this.$message.success("删除成功");
      this.initList();
    } catch (error) {
      return null;
    }
  }

  handlerBitsClick(e: number) {
    this.visited = e;
    this.initList();
  }

  async initList(search?: any) {
    const paper: any = this.pagination;
    const current: number = paper.current;
    let query: any = {
      page: current,
      count: this.pageSize,
      osType: this.visited
    };
    if (search) query = { ...query, ...search };
    try {
      this.loading = true;
      const [{ data: page }, { data: count }] = await Promise.all([
        drive_pages(query),
        drive_count(query)
      ]);
      this.loading = false;
      this.pagination.total = count.item;
      this.data = page.item;
    } catch (error) {
      this.loading = false;
    }
  }
}
</script>

<style lang="less" scoped>
.tool-bar {
  padding: 0 10px 10px 0;
  .btn {
    margin-right: 10px;
  }
}
.content {
  padding: 0 3px;
  width: 300px;
  word-wrap: break-word;
}
.ignore {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
